<template>
  <div class="m-el-cascader-container" :class="{'hasChoice': hasChoice}">
    <el-input placeholder="请选择内容"  suffix-icon="el-icon-arrow-down" :readonly="true" :value="valueStr" @click.native="handleShowChoice" class="red"></el-input>
    <div class="m-el-cascader-menu" v-if="showChoice">
      <template v-for="(item, index) in choiceOptions">
        <ul class="m-el-cascader-item"  :key="index">
          <li v-for="(i, sindex) in item" :key="sindex" :class="{'m-choice': i.check}" @click="handleChoice(index, i, sindex)">
            {{i.label}}
            <i v-if="index === 0"  class="el-icon-arrow-right" style="float: right;margin-top: 11px;"></i>
          </li>
        </ul>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    newValue: {
     type: Array,
      default: () => {
        return []
      }
    },
    hasChoice:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      newOptions: {},
      choiceOptions: [],
      showChoice: false
    }
  },
  computed: {
    valueStr() {
      let str = ''
      this.newValue.forEach(i => {
        str += i.value + ';'
      })
      return str;
    }
  },
  methods: {
    initData() {
      this.showChoice = false
      const options = JSON.parse(JSON.stringify(this.options)) || []
      this.newOptions = {}
      options.forEach((item, index) => {
        if(this.newOptions['one']){
          this.newOptions['one'].push({
            label: item.label,
            value: item.value,
            check: false
          })
        } else {
          this.newOptions['one'] = [{
            label: item.label,
            value: item.value,
            check: false
          }]
        }
        item.children.forEach((sitem, sindex) => {
            const index = this.newValue.findIndex(i => i.key === (item.value + "" + sitem.value))
            if(this.newOptions['two']){
              this.newOptions['two'].push({
                pvalue: item.value,
                plabel: item.label,
                label: sitem.label,
                value: sitem.value,
                check: index !== -1
              })
            } else {
              this.newOptions['two'] = [{
                pvalue: item.value,
                plabel: item.label,
                label: sitem.label,
                value: sitem.value,
                check: index !== -1
              }]
            }
        })
      })
     this.choiceOptions = []
     this.choiceOptions[0] = this.newOptions['one']

    },
    handleShowChoice() {
      this.showChoice = true
    },
    closeShowChoice() {
      this.showChoice = false
    },
    handleChoice(index, item, type) {
      let valueStr = []
      if (index === 0){
        const data = this.newOptions['two'].filter(i => i.pvalue === item.value)
        if (data.length) {
           this.choiceOptions.splice(index + 1, 1, data)
        }
        this.newOptions['one'].map(i => {
          i.check = false
          if (i.value === item.value) {
            i.check = true
          }
          return i
        })
      } else if (index === 1){
        this.newOptions['two'].map(i => {
          if (i.pvalue === item.pvalue) {
            i.check = false
            if (i.value === item.value) {
              i.check = true
            }
          }
          return i
        })
        this.newOptions['two'].forEach(i => {
          if (i.check) {
            valueStr.push({
              value: i.plabel + ':' + i.label,
              key: i.pvalue + '' +i.value
            })
          }
        })

      }
      this.$emit('getValue', {value: valueStr, index: index})
    }
  }
}
</script>

<style lang="scss">
.m-el-cascader-container {
  position: relative;
  .m-el-cascader-menu {
    position: absolute;
    left: 0;
    top: 40px;
    background-color: #fff;
    white-space: nowrap;
    height: 180px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 6px;
    padding: 10px 0;
  }
  .m-el-cascader-item {
    display: inline-block;
    vertical-align: top;
    width: 120px;
    height: 180px;
    overflow: auto;
    border-right: 1px solid #eee;
    padding-bottom: 20px;
    li {
      padding: 0 10px;
      line-height: 36px;
      cursor: pointer;
      &.m-choice {
        color: #409eff;
      }
    }
  }
  &.hasChoice {
    .el-input__inner {
      color: #f56c6c;
      border: 1px solid #f56c6c
    }
  }

}
</style>
